<template>
	<view>
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms class="form" ref="baseForm" :modelValue="baseFormData" border label-position="top">
				<uni-forms-item label="标题" name="title" required>
					<uni-easyinput v-model="baseFormData.title" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item v-if="baseFormData.table == 'introduce' " label="图片选择" name="picture" required>
					<image v-if="baseFormData.image" :src=" baseFormData.image" mode="">
					</image>
					<button class="images" type="primary" @click="chooseImage">选择图片</button>
				</uni-forms-item>
				<!-- 		<uni-forms-item label="发布时间" name="datetime">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="baseFormData.datetime" />
				</uni-forms-item> -->
				<uni-forms-item label="内容" :border="true" required name="txt">
					<uni-easyinput type="textarea" autoHeight v-model="baseFormData.txt" placeholder="请输入内容" />
				</uni-forms-item>
				<button type="primary" @click="submit()">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import store from "@/store/index.js";
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				id: 0,
				baseFormData: {
					title: '',
					image: '',
					// datetime: '',
					txt: '',
					table: 'introduce',
				}

			}
		},
		methods: {
			...mapMutations('course', ['getTutorials', 'getIntroduces']),
			onLoad: function(option) {
				//option为object类型，会序列化上个页面传递的参数
				this.baseFormData.table = option.type;
				console.log("参数：", option); //打印出上个页面传递的参数。
				// console.log(this.baseFormData.table == 'introduce')
			},

			//提交数据
			submit(ref) {
				if (this.baseFormData.table == 'tutorials')
					delete this.baseFormData.image;
				//检验有必要的信息有没有填写
				if (Object.values(this.baseFormData).every(item => {
						return item
					})) {
					// 如果有图片将图片提交到后端
					if (this.baseFormData.image) {
						uni.uploadFile({
							url: 'http://localhost:3000/images', // 替换为你的Node.js后端地址
							filePath: this.baseFormData.image,
							name: 'file',
							// formData: {
							// 	'id': state.userId
							// },
							success: (uploadRes) => {
								console.log(JSON.parse(uploadRes.data).filePath)
								let images = 'http://localhost:3000' + JSON.parse(uploadRes.data).filePath
								this.baseFormData.image = images
								// console.log("this.baseFormData.image:", this.baseFormData.image)
								console.log('上传成功:', JSON.parse(uploadRes.data));
								console.log(JSON.stringify(this.baseFormData))
								//数据发给后端
								uni.request({
									url: 'http://localhost:3000/course',
									method: 'post',
									data: this.baseFormData,
									success: (res) => {
										console.log("res:", res)
										this.getIntroduces();
									},
								});
							},
							fail: (err) => {
								console.error('上传失败:', err);
							}
						});
					} else {
						//数据发给后端
						uni.request({
							url: 'http://localhost:3000/course',
							method: 'post',
							data: this.baseFormData,
							success: (res) => {
								console.log("res:", res)
								this.getTutorials()
							}
						});
					}
					uni.reLaunch({
						url: '/pages/admin/admin'
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: '有些区域未填值',
						duration: 1000
					})
				}
			},
			//更改头像
			chooseImage() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						this.baseFormData.image = tempFilePaths[0]
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;

		.form {
			.images {
				width: 200rpx;
			}
		}
	}
</style>